import React, { useState, useCallback } from "react";
import VoteMain from "./VoteMain";
import VoteFooter from "./VoteFooter";
import "./Vote.less";
const Vote = () => {
  const [supNum, setSupNum] = useState(10);
  const [oppNum, setOppNum] = useState(0);

  const change = useCallback(
    (type) => {
      if (type === "sup") {
        setSupNum(supNum + 1);
        return;
      }
      setOppNum(oppNum + 1);
    },
    [supNum, oppNum]
  );

  return (
    <div className="vote-box">
      <div className="header">
        <h2 className="title">React 是很棒的前端框架</h2>
        <span className="num">{supNum + oppNum}</span>
      </div>
      <VoteMain supNum={supNum} oppNum={oppNum} />
      <VoteFooter change={change} />
    </div>
  );
};

export default Vote;
